<template>
  <div class="login-container">
    <a-card>
      <img src="@/images/login.png" alt="" id="left" />
      <div id="right">
        <h2>光谷智慧交通</h2>
        <a-form
          name="basic"
          :model="formState"
          :rules="rules"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
          @submit="onSubmit"
        >
          <a-form-item label="用户名" name="username">
            <a-input v-model:value="formState.username" />
          </a-form-item>
          <a-form-item label="密码" name="password">
            <a-input-password v-model:value="formState.password" />
          </a-form-item>
          <a-form-item label="验证码" name="pass">
            <a-input-password v-model:value="formState.pass" />
          </a-form-item>
          <a-form-item id="verify"><Verify /></a-form-item>
          <a-button type="primary" html-type="submit">登录</a-button>
          <a-from-item id="signin">
            <a href="/#/signin">注册新用户</a>
          </a-from-item>
        </a-form>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { reactive, ref, onUpdated, onMounted } from 'vue'
import { Modal } from 'ant-design-vue'
// 引入滑块
import Verify from '@/components/Verify.vue'
// 封装的请求
import $verify from '@/request/verify.js'
// 路由部分
import { useRouter } from 'vue-router'
const $router = useRouter()
// store部分
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/useUserStore.js'
import { useVerifcation } from '@/store/useVerifcation.js'
const userStore = useUserStore()
const useVerify = useVerifcation()
const { username, userType, user_id } = storeToRefs(userStore)
const { verifcation } = storeToRefs(useVerify) //验证码

// 表单
let formState = reactive({
  username: '',
  password: '',
  pass: '',
})

// 检查验证码
const checkCode = async (_rule, value) => {
  if (!value) {
    return Promise.reject('请输入验证码')
  } else if (value != verifcation.value) {
    return Promise.reject('验证码有误!')
  }
}

const rules = {
  username: [
    {
      required: true,
      message: '请输入用户名!',
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码!',
      trigger: 'blur',
    },
  ],
  pass: [
    {
      required: true,
      validator: checkCode,
      trigger: 'blur',
    },
  ],
}

function onSubmit() {
  if (formState.username && formState.password && formState.pass) {
    $verify.toLogin(formState).then((res) => {
      const { code, message } = res
      if (code != 200) {
        Modal.error({
          content: '用户名或密码错误!',
        })
        return
      } else {
        const data = res.data
        console.log('2222', res.data)
        userStore.changeState({
          username: data.username,
          userType: data.user_type,
          user_id: data.id,
        })
        localStorage.setItem('isLogin', 1)
        Modal.success({
          content: '欢迎登录光谷智慧交通系统!',
        })
        $router.push({ path: '/home' })
      }
    })
  }
}
</script>

<style scoped>
/* ::v-deep 加这个前缀可以修改AntDesignVue样式 */
.login-container {
  height: 100vh;
  width: 100vw;
  background: #14b4c9;
}
.ant-card {
  position: fixed;
  top: 10vh;
  left: 20vw;
  width: 60vw;
  height: 70vh;
}
.ant-card :deep .ant-card-body {
  display: flex;
  padding: 0px;
  justify-content: flex-start;
}
#left {
  width: 30vw;
  height: 70vh;
  border-right: 1px solid #999;
}
#right h2 {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 30vw;
  height: 10vh;
  line-height: 10vh;
  text-align: center;
  background: rgb(231, 231, 231);
  color: #999;
  font-family: '隶书';
  font-size: 30px;
  border-bottom: 1px solid #999;
  border-left: 1px solid #999;
}
#right .ant-form {
  position: absolute;
  top: 15vh;
  right: 5vw;
  width: 25vw;
}
#verify {
  margin-left: 10vw;
}
.ant-btn-primary {
  position: fixed;
  top: 65vh;
  left: 55vw;
  width: 20vw;
  height: 7vh;
  border-radius: 5px;
  color: #fff;
  border-color: #14b4c9;
  background: #14b4c9;
  font-weight: 700;
}
a {
  position: fixed;
  top: 73vh;
  left: 70vw;
  text-decoration: underline;
}
</style>
